<template>
    <div class="tui">
    <a href="#" target="_self" class="tui2">
      <i
        class="bg_sp btn_top"
        @click="goTop"
      > 返回顶部</i>
    </a>
  </div>
</template>

<script>
export default {
  name: 'tui',
  methods: {
    goTop () {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            40
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 20)
    }
  }
}
</script>

<style lang="scss" scoped>
.tui {
  width: 68px;
  height: 62px;
  position: fixed;
  right: 50px;
  top: 500px;
  z-index: 300;
  .tui2 {
    display: block;
    border: 1px solid #e1e1e1;
    background: #fff;
    width: 68px;
    padding: 7px 0;
    text-align: center;
    margin-top: 3px;
    text-decoration: none;
    i{
      color: rgb(43, 110, 233);
    }
  }
}
</style>
